<template>
<!-- 抄表轨迹图 -->
  <div>
    <!-- 输入框 -->
    <div class="top-box">
      <div class="top-box-list">
        <div class="top-box-list-tit">抄表手册</div>
        <div class="top-box-list-inp">
          <el-select size="mini" style="width:100%;" v-model="copyBook" placeholder="请选择">
            <el-option
              v-for="item in copyBookOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="top-box-list">
        <div class="top-box-list-tit">抄表日期</div>
        <div class="top-box-list-inp">
          <el-date-picker
            size="mini"
            v-model="copyTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled="true"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btn-box">
      <div class="btn-box-left">
        <!-- <el-button type="primary" size="mini" @click="cutMap(0)">开始抄表</el-button> -->
        <el-button type="primary" size="mini" @click="cutMap(1)">轨迹回放</el-button>
        <el-button type="primary" size="mini" @click="cutMap(1)">线路回放</el-button>
      </div>
      <div>
        <el-button type="primary" size="mini" icon="el-icon-search" plain @click="searchLocation">搜索</el-button>
        <el-button type="primary" size="mini" icon="el-icon-refresh-right" plain>重置</el-button>
      </div>
    </div>
    <div v-show="index==0">
      <copying ref="btn0"></copying>
    </div>
    <div v-show="index==1">
      <history ref="btn1"></history>
    </div>
  </div>
</template>
<script>
//引入轨迹回放组件
import history from "./history";
//引入抄表路线图
import copying from "./copying";
//引入api
import { postGetBook,postGetLongitude } from "@/api/copyingMap";
export default {
  components: {
    history,
    copying,
  },
  data() {
    return {
      index: 0,
      //抄表员
      copyMan: "",
      //抄表手册选项
      copyBookOptions: [],
      //抄表手册
      copyBook: undefined,
      //抄表日期
      copyTime: [],
    };
  },
  mounted() {
    //初始化
    this.$refs.btn0.loadingCopyingMap();
    //抄表手册选项
    this.optionsBook();
  },
  methods: {
    //切换
    cutMap(n) {
      let that = this;
      that.index = n;
      console.log(that.index);
      switch (that.index) {
        case 0:
          that.$refs.btn0.loadingCopyingMap();
          break;
        case 1:
          that.$refs.btn1.loadingHistoryMap();
          break;
      }
    },
    //获取抄表手册
    optionsBook() {
      postGetBook().then((Response) => {
        let rends = Response.data;
        rends.forEach((element) => {
          let obj = {
            value: element.ID,
            label: element.NAME,
          };
          this.copyBookOptions.push(obj);
        });
      });
    },
    //点击搜索
    async searchLocation(){
      if(this.copyBook){
       await this.$refs.btn0.showLAL(this.copyBook);
       await this.$refs.btn1.loadingHistoryMap();
      }else{
        this.$message({
        message: '请输入搜索信息',
        type: "success",
      });
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.top-box {
  display: flex;
  // padding: 10px;
  padding: 40px 20px 30px 20px;
  border-bottom: 1px solid #eaeaea;
  margin:0 30px;
  .top-box-list {
    flex: 1;
    display: flex;
    padding: 0px 20px;
    .top-box-list-tit {
      width: 80px;
      display: flex;
      align-items: center;
    }
    .top-box-list-inp {
      flex: 100;
    }
  }
}
.btn-box {
  padding: 25px 40px;
  display: flex;
  justify-content: space-between;
  .btn-box-left {
    margin-left: -10px;
    margin-bottom: 5px;
  }
}
</style>